<template>
  <div>
    <span class="status-tag pointer">
      <a-popconfirm
        :title="getTitle()"
        ok-text="确定"
        cancel-text="取消"
        placement="left"
        @confirm="onFirmwareStatusClick(firmware)"
      >
        <a-tag
          :color="firmware.firmware_status ? commonColor.NORMAL : commonColor.FAIL"
          :class="firmware.firmware_status ? 'border-corner ' : 'status-disable border-corner'"
        >
          {{ getText(firmware.firmware_status) }}
        </a-tag>
      </a-popconfirm>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { changeFirmareStatus } from '@/api/manage'
import { ELocalStorageKey } from '@/types'
import { Firmware, FirmwareStatusEnum } from '@/types/device-firmware'
import { commonColor } from '@/utils/color'
import { sessionStorage } from '@/utils/storage'

const props = defineProps<{
  firmware: Firmware
}>()

const workspaceId: string = sessionStorage.get(ELocalStorageKey.WorkspaceId)!

function getTitle() {
  return `您确定要将此固件设置为${getText(!props.firmware.firmware_status)}?`
}

function getText(status: boolean) {
  return status ? FirmwareStatusEnum.TRUE : FirmwareStatusEnum.FALSE
}

function onFirmwareStatusClick(record: Firmware) {
  changeFirmareStatus(workspaceId, record.firmware_id, { status: !record.firmware_status }).then((res) => {
    if (res.code === 1) {
      record.firmware_status = !record.firmware_status
    }
  })
}
</script>

<style lang="scss" scoped>
.status-disable {
  opacity: 0.4;
}
.border-corner {
  border-radius: 3px;
}
.pointer {
  cursor: pointer;
}
</style>
